<template>
	<view class="big-box" :style="{'min-height':minHeight}">
		<view class="top-box">
			<view class="top-title">问题导航</view>
			<view class="top-line"></view>
			<view class="top-type" :v-if='list.length'>
				<view 
					:key="index"
					v-for="(item,index) in list"
					class="top-type-item"
					:style="{
						background: typeIndex === index ? '#4A87FD' : '#F5F5F5',
						color: typeIndex === index ? '#fff' : '#595959'
					}"
					@click="changeQuestion(item,index)"
				>
					{{item?.name || ''}}
				</view>
			</view>
		</view>
		<view class="tow-box">
			<view class="top-title">{{list[typeIndex]?.name || ''}}</view>
			<view class="top-line"></view>
			<view v-if='listDetail.length'>
				<view
					class="tow-box-item-box"
					v-for="(item,index) in listDetail"
					:key="index"
				>
					<view class="tow-box-title" style="margin-top: 0;">
						<u-image
							width="35rpx" 
							height="35rpx" 
							src="http://jjboss.oss-cn-hangzhou.aliyuncs.com/gztz_attachment/20220915/654b25351c58c0ae4233ad72473eee91.png" 
						/>
						<view class="tow-box-detail-title">{{item.content}}</view>
					</view>
					<view class="tow-box-title">
						<u-image
							width="35rpx"
							height="35rpx"  
							src="http://jjboss.oss-cn-hangzhou.aliyuncs.com/gztz_attachment/20220915/be8cba5028988278fcc9811df193785b.png" 
						/>
						<view class="tow-box-detail">
							{{item.answer}}
						</view>
					</view>
					<view v-if="listDetail.length-1 !== index" class="tow-box-item-box-line"></view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import request from "@/pagesB/common/js/request/allRequest.js"
	export default {
		data() {
			return {
				minHeight:'100px',
				typeIndex:0,
				list:[],
				listDetail:[],
				page:{
					page:1,
					page_size:10
				},
				count:0
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.minHeight = res.windowHeight+"px"
					request.getQuestionAndAnswer({
						success:(res)=>{
							this.list = res
							this.category_id = res[0].id
							res.length > 0 && this.questionAndAnswer(this.category_id)
						},
						fail:(err)=>{
							
						}
					})
				}
			})
		},
		onPullDownRefresh() {
			setTimeout(() => uni.stopPullDownRefresh(),6000)
			this.page = {
				page:1,
				page_size:10
			}
			this.listDetail = [	]
			this.questionAndAnswer(this.category_id)
		},
		onReachBottom() {
			if(this.listDetail.length === this.count){
				this.$u.toast('暂无更多数据')
			}else{
				this.page = {
					page:this.page.page + 1,
					page_size:10
				}
				this.questionAndAnswer(this.category_id)
			}
		},
		methods: {
			changeQuestion(item,index){
				this.typeIndex = index
				this.category_id = item.id
				this.listDetail = []
				this.page = {
					page:1,
					page_size:10
				}
				this.questionAndAnswer(this.category_id)
			},
			questionAndAnswer(category_id){
				uni.showLoading()
				request.getQuestionAndAnswerDetail({
					data:{
						...this.page,
						category_id
					},
					success:(resp) => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
						this.count = resp.data.count
						this.listDetail = [...this.listDetail,...resp.data.list];
					},
					fail:()=>{
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.big-box{
		box-sizing: border-box;
		padding: 24rpx;
		background-color: #f7f7f7;
	}
	.tow-box-item-box{
		.tow-box-item-box-line{
			margin-top: 40rpx;
			height: 1rpx;
			border-top: 1rpx dashed #d3d3d3;
		}
		box-sizing: border-box;
		padding:34rpx ;
	}
	.tow-box{
		margin-top:20rpx;
		background-color: #fff;
		border-radius: 18rpx;
		.tow-box-title{
			margin-top: 26rpx;
			display: flex;
		}
		.tow-box-detail-title{
			margin-left: 30rpx;
			font-size: 30rpx;
			font-family: PingFangSC, PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			color: #222222;
			line-height: 42rpx;
		}
		.tow-box-detail{
			font-size: 28rpx;
			margin-left: 30rpx;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			color: #686868;
		}
	}
	.top-box{
		background-color: #fff;	
		border-radius: 18rpx;
		.top-type-item{
			box-sizing: border-box;
			padding: 0 16rpx;
			// overflow:hidden;
			// text-overflow:ellipsis;
			// white-space:nowrap;
			word-break: break-all;
			// width:174rpx;
			// height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			color: #fff;
			border-radius: 32rpx;
			margin:16rpx 32rpx 16rpx 0;
		}
		.top-type{
			box-sizing: border-box;
			padding:16rpx 32rpx;
			display: flex;
			flex-wrap: wrap;
		}
	}
	.top-title{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
		font-size: 30rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		color: #000000;
		line-height: 42rpx;
	}
	.top-line{
		height: 1rpx;
		background-color:#eaeaea;
	}
</style>
